<template>
  <view class="Product">
    <view class="Product_title" @click="onProduct">
      <view>已选
        <text class="Product_hui">请选择规格</text>
      </view>
      <view class="Product_icon">
        <u-icon name="arrow-right" size="17"></u-icon>
      </view>
    </view>
    <u-popup :show="show" closeable @close="show = !show">
      <view class="Product_modal">
        <view class="Product_modal_head">
          <!-- mode="aspectFit" -->
          <u-image src="@/static/tabs/buku2.png" height="200rpx" width="200rpx"></u-image>
          <view class="Product_modal_right">
            <b-money price="1999.88" is_hidden></b-money>
            <view class="Product_modal_right_red">分享200福袋免单</view>
            <view class="Product_modal_right_hui">已选 蓝色 M</view>
          </view>
        </view>
        <view class="Product_modal_color">
          <view>颜色分类</view>
          <view class="Product_modal_color_list">
            <view class="Product_modal_color_btn" @click="selectList(item, index)"
              :class="[selectColor === index && 'selectColor']" v-for="item, index in 9" :key="index">
              <u-image height="115rpx" width="115rpx" src="@/static/tabs/buku2.png"></u-image>
            </view>
          </view>
        </view>
        <view class="Product_modal_bottom">
          <view>尺码</view>
          <view class="Product_modal_bottom_list">
            <view class="Product_modal_bottom_select" @click="sizeOnclik(items, indexs)" v-for="items, indexs in sizeList"
              :key="indexs" :class="[items.count > 0 ? indexs === sizeIndex && 'selectColor' : 'disables']">
              {{ items.name }}
              <view class="Product_modal_bottom_poss" v-if="items.count === 0"> 缺货</view>
            </view>

          </view>
        </view>
        <view class="Product_modal_footer" @click="sublime">立即下单</view>
      </view>
    </u-popup>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const show = ref<boolean>(false)
const selectColor = ref<number>(0)
const sizeIndex = ref<number>(0)
const sizeList = reactive([
  {
    name: 'XL',
    count: 10,
  },
  {
    name: 'XXL',
    count: 10,
  },
  {
    name: 'M',
    count: 0,
  },
  {
    name: 'XS',
    count: 10,
  },
  {
    name: '3XL',
    count: 10,
  },
])
function onProduct() {
  show.value = true
}
function selectList(Node, index) {
  selectColor.value = index
}
function sizeOnclik(node, indexs) {
  sizeIndex.value = indexs
}
function sublime() {
  show.value = false
}
</script>
<style scoped lang="scss">
@import './Product.scss'
</style>